<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-audio">
      <input-normal v-if="commonAttr.url" label="地址" v-model="commonAttr.url" @change="onChangeAttr"></input-normal>
      <p class="margin-left-right-16">封面</p>
      <add-img-con :url="commonAttr.cover" comAttr="commonAttr" picAttr="cover" :isCrop="false" :isDelete="true" :height="100" class="margin-left-right-16"></add-img-con>
      <input-normal label="封面" v-model="commonAttr.cover" @change="onChangeAttr"></input-normal>
      <input-normal label="主题色" v-model="commonAttr.theme" @change="onChangeAttr"></input-normal>
      <input-normal label="歌词" v-model="commonAttr.lrc" @change="onChangeAttr"></input-normal>
      <slider-normal v-model="commonAttr.volume" label="音量" :max="1" :step="0.1" @change="onChangeAttr"></slider-normal>
      <input-normal label="标题" v-model="commonAttr.name" @change="onChangeAttr"></input-normal>
      <input-normal label="作者" v-model="commonAttr.artist" @change="onChangeAttr"></input-normal>
      <switch-normal v-model="commonAttr.loop" label="音频循环播放" @change="onChangeAttr"></switch-normal>
      <textarea-normal label="自定义参数" v-model="commonAttr.params" placeholder='{"coverWidth":68,"coverHeight":68}' @change="onChangeAttr"></textarea-normal>
      <switch-normal v-model="commonAttr.isFiexed" label="固定在底部" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isMini" label="最小化" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isAutoPlay" label="自动播放声音" @change="onChangeAttr"></switch-normal>
      <switch-normal v-model="commonAttr.isDisplayControls" label="显示控制条" @change="onChangeAttr"></switch-normal>
    </el-form>
  </right-template>
</template>


<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
</script>